<style rel="stylesheet/scss" lang="scss" scoped>
.future-add {
  text-align: right;
  margin-bottom: 10px;
  margin-top: -40px;
}
@import "../../../styles/prod.scss";
</style>
<template>
  <div class="app-container calendar-list-container">
    <div class="pds-tip-green">
      <p>
        <el-input style="width: 200px;" class="filter-item" placeholder="请输入机型号" v-model="search.context">
        </el-input>
        <el-button class="filter-item" type="success" icon="search" @click="importModel()" size="small">导入</el-button>
      </p>
    </div>
    <!-- 电器件 -->
    <el-form :model="detail" ref="postForm" label-suffix="：" label-width="120px">
      <custom-card title="电器件">
        <el-row class="">
          <el-col :span="6">
            <el-input placeholder="输入关键字进行过滤" v-model="filter.future"></el-input>
            <el-tree class="filter-tree" :data="filter.assetTree" default-expand-all @node-click="handleFutureClick" :filter-node-method="filterFuture" ref="assetTree">
            </el-tree>
          </el-col>
          <el-col :span="18" style="padding-left:20px">
            <el-table :data="detail.electronicsList" border style="width: 100%">
              <el-table-column label="序号" width="60px" align="center">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
              <el-table-column label="名称">
                <template slot-scope="scope">
                  {{scope.row.nameCn}}
                </template>
              </el-table-column>
              <el-table-column label="规格">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.standard" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="厂商">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.manufacturer" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="认证">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.cert" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100px" align="center">
                <template slot-scope="scope">
                  <el-button class="filter-item" type="danger" size="mini" @click="deletItem(scope.$index,detail.electronicsList)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </custom-card>
      <!-- 结构件 -->
      <custom-card style="margin-top:20px;" title="结构件">
        <el-row class="">
          <el-col :span="6">
            <el-input placeholder="输入关键字进行过滤" v-model="filter.asset"></el-input>
            <el-tree class="filter-tree" :data="filter.strassetTree" default-expand-all @node-click="handlestrClick" :filter-node-method="filterstrFuture" ref="strassetTree">
            </el-tree>
          </el-col>
          <el-col :span="18" style="padding-left:20px">
            <el-table :data="detail.structuresList" border style="width: 100%">
              <el-table-column label="序号" width="60px" align="center">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
              <el-table-column label="名称">
                <template slot-scope="scope">
                  {{scope.row.nameCn}}
                </template>
              </el-table-column>
              <el-table-column label="规格">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.standard" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="厂商">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.manufacturer" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="控制点">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.controlPoint" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100px" align="center">
                <template slot-scope="scope">
                  <el-button class="filter-item" type="danger" size="mini" @click="deletstrItem(scope.$index,detail.structuresList)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </custom-card>
      <!-- 控制要点 -->
      <custom-card style="margin-top:20px;" title="控制要点">
        <el-row class="">
          <el-col :span="6">
            <el-input placeholder="输入关键字进行过滤" v-model="filter.control"></el-input>
            <el-tree class="filter-tree" :data="filter.conassetTree" default-expand-all @node-click="handleconClick" :filter-node-method="filterconFuture" ref="conassetTree">
            </el-tree>
          </el-col>
          <el-col :span="18" style="padding-left:20px">
            <div class="future-add">
              <!-- <el-button type="primary" size="mini" @click="addconFuture()">新增</el-button> -->
            </div>
            <el-table :data="detail.controlPointsList" border style="width: 100%">
              <el-table-column label="序号" width="60px" align="center">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
              <el-table-column label="名称">
                <template slot-scope="scope">
                  {{scope.row.nameCn}}
                </template>
              </el-table-column>
              <el-table-column label="内容">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.context" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100px" align="center">
                <template slot-scope="scope">
                  <el-button class="filter-item" type="danger" size="mini" @click="deletconItem(scope.$index,detail.controlPointsList)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </custom-card>
      <div class="pds-btm mt-30">
        <div class="right">
          <el-button class="filter-item" type="primary" @click="submitForm()" :loading="loading">提交</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import * as api from '@/api/product/pcc/index';
import * as addApi from '@/api/sale/pcc/index';
import EditRefresh from '@/components/Mixin/editRefresh.js';
export default {
  computed: {
    ...mapGetters(['elements', 'language', 'dict'])
  },
  mixins: [EditRefresh],
  data() {
    return {
      search: {
        context: ''
      },
      loading: false,
      filter: {
        future: '',
        asset: '',
        control: '',
        assetTree: [],
        strassetTree: [],
        conassetTree: []
      },
      articleId: '',
      productCategoryId: '',
      detail: {
        electronicsList: [],
        structuresList: [],
        controlPointsList: []
      }
    };
  },
  watch: {
    'filter.future'(value) {
      this.$refs.assetTree.filter(value);
    },
    'filter.asset'(val) {
      this.$refs.strassetTree.filter(val);
    },
    'filter.control'(val) {
      this.$refs.conassetTree.filter(val);
    }
  },
  created() {
  },
  activated() {
  },
  methods: {
    refresh() {
      if (
        this.$route.query.articleId
      ) {
        this.articleId = this.$route.query.articleId;
        this.productCategoryId = this.$route.query.productCategoryId;
        
        this.getPdsConfAssetTree();
        this.getPdsstrAssetTree();
        this.getPdscontrolAssetTree();
        this.getFilePCC();
      }
    },
    getFilePCC() {
      addApi
        .getFilePcc({
          articleId: this.$route.query.articleId
        })
        .then(res => {
          console.log('详情', res)
          this.detail = res.data;
          this.detail.electronicsList = this.detail.electronicsList || []
          this.detail.structuresList = this.detail.structuresList || []
          this.detail.controlPointsList = this.detail.controlPointsList || []
        });
    },
    refreshDetailCb(res) {
      res.data.electronicsList = res.data.electronicsList || [];
    },
    // 电器件
    getPdsConfAssetTree() {
      api
        .getPdsConfAssetTree({
          type: 4,
          productCategoryId: this.productCategoryId,
          modelOrArticleId: this.articleId
        })
        .then(res => {
          console.log('=>', res);
          this.filter.assetTree = res.data;
        });
    },
    filterFuture(value, filter) {
      // debugger
      if (!value) return true;
      console.log('filterstrFuture', value, filter);
      // debugger
      if (this.language === 'en') {
        return filter.nameCn.indexOf(value) !== -1;
      } else {
        return filter.nameEn.indexOf(value) !== -1;
      }
    },
    handleFutureClick(data) {
      let isNew = true;
      this.detail.electronicsList.map(row => {
        if (row.assetId === data.id) {
          isNew = false;
        }
      });
      if (isNew) {
        data.assetId = data.id;
        this.detail.electronicsList.push(data);
      }
    },
    deletItem(index, list) {
      console.log('delete', index, list);
      list.splice(index, 1);
    },
    // 结构件
    getPdsstrAssetTree() {
      api
        .getPdsConfAssetTree({
          type: 5,
          productCategoryId: this.productCategoryId,
          modelOrArticleId: this.articleId
        })
        .then(res => {
          console.log('====+>>>', res);
          this.filter.strassetTree = res.data;
          console.log(this.filter.strassetTree);
        });
    },
    filterstrFuture(value, filter) {
      if (!value) return true;
      console.log('filterstrFuture', value, filter);
      if (this.language === 'en') {
        return filter.nameCn.indexOf(value) !== -1;
      } else {
        return filter.nameEn.indexOf(value) !== -1;
      }
    },
    handlestrClick(data) {
      let isNew = true;
      this.detail.structuresList.map(row => {
        if (row.assetId === data.id) {
          isNew = false;
        }
      });
      if (isNew) {
        data.assetId = data.id;
        this.detail.structuresList.push(data);
      }
    },
    deletstrItem(index, list) {
      console.log('delete', index, list);
      list.splice(index, 1);
    },
    // 控制要点
    getPdscontrolAssetTree() {
      api
        .getPdsConfAssetTree({
          type: 6,
          productCategoryId: this.productCategoryId,
          modelOrArticleId: this.articleId
        })
        .then(res => {
          console.log('===>', res);
          this.filter.conassetTree = res.data;
          console.log(this.filter.conassetTree);
        });
    },
    filterconFuture(value, filter) {
      if (!value) return true;
      console.log('filterconFuture', value, filter);
      if (this.language === 'en') {
        return filter.nameCn.indexOf(value) !== -1;
      } else {
        return filter.nameEn.indexOf(value) !== -1;
      }
    },
    handleconClick(data) {
      let isNew = true;
      this.detail.controlPointsList.map(row => {
        if (row.assetId === data.id) {
          isNew = false;
        }
      });
      if (isNew) {
        data.assetId = data.id;
        this.detail.controlPointsList.push(data);
      }
    },
    deletconItem(index, list) {
      console.log('delete', index, list);
      list.splice(index, 1);
    },
    submitForm() {
      this.loading = true;
      this.detail.modelOrArticleId = this.articleId
      addApi.saveModelPCC(this.detail).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.$store.dispatch('delActiveViews');
        } else {
          this.$message({
            type: 'error',
            message: res.message
          });
        }
        this.loading = false;
      });
      this.loading = false;
    },
    // 导入
    importModel() {
      if (this.search.context) {
        addApi.importArticlePCC({ plmModelNo: this.search.context }).then(res => {
          console.log('====>>>>>>>', res)
          this.detail = res.data
          console.log(this.detail)
          this.refreshDetailCb(res);
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '已导入'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        });
      }
    }
  }
};
</script>
